<template>
    <div class="usercenter">
        <div class="count">
            <p class="font-60">{{totalBonus}}</p>
            <p class="light-grey font-26">累计奖金</p>
        </div>
        <div style="width:100%;height:10px;background:#f8f8f8;"></div>
        <ul class="list-item" style="border-bottom: 1px solid #eee;">
            <li class="list-item-li" style="border:none">
                <p>奖金记录</p>
            </li>
        </ul>
        <div class="list-item">
            <LoadMore @loadMore="getList" :list="lists" :pageNo="pageNo" :totalPage="totalPage"
                      v-if="lists && lists.length > 0">
                <div slot-scope="dloadSwiper" class="list-item-li">
                    <div>
                        <p class="text">{{dloadSwiper.item.userName}}</p>
                        <p class="light-grey">{{dloadSwiper.item.createdTime}}</p>
                    </div>
                    <p class="price">
                        {{dloadSwiper.item.bonus > 0 ? '+' + dloadSwiper.item.bonus : '-' + dloadSwiper.item.bonus
                        }}</p>
                </div>
            </LoadMore>
        </div>


    </div>
</template>

<script>
  import {getMemberReward} from '_common/services/user'
  import LoadMore from '_components/loadMore/loadMore'
  import {getQuery} from '@/utils/utils'
  import wxLogin from '_common/wxLogin.js'
  export default {
    name: 'rewardRecord',
    data() {
      return {
        totalBonus: 0,
        lists: [],
        pageNo: 1,
        pageSize: 10,
        totalPage: 1
      }
    },
    computed: {},
    async beforeMount() {
      await wxLogin(this.getData)
    },
    methods: {
        getData() {
            this.totalBonus = getQuery('totalBonus')
            this.getList()
        },
      getList () {
        getMemberReward().then(res => {
          if (res && res.code === 0) {
            let data = res.data
            this.lists = this.lists.concat(data.data)
            this.pageNo++
            this.totalPage = data.totalsPage
          }
        }, reject => {
          this.$alertTip('获取失败请稍后再试')
        })
      }
    },
    components: {
      LoadMore
    }
  }
</script>
<style lang="less">
    @import "../../css/common";
    body{
        background: #fff;
        .usercenter{
            .light-grey{
                color: #999;
            }
            .count{
                text-align: center;
                height: 230px;
                padding-top:52px;
                box-sizing: border-box;
                .font-60{
                    font-size: 60px;
                    font-weight: bold;
                }
                .font-26{
                    font-size: 26px;
                }
            }
            .swiper-wrapper {
                background: transparent;
            }
            .list-item{
                margin-top: 20px;
                padding: 0 32px;
                background-color: #fff;
                .list-item-li {
                    .flex(space-between);
                    font-size: 30px;
                    color: #333;
                    padding: 25px 0;
                    border-bottom: 2px solid #eee;
                    .text{
                        margin-bottom: 10px;
                    }
                    .price{
                        font-weight: bold;
                        font-size: 36px;
                    }
                }
            }
        }
    }


</style>